<!DOCTYPE html>
<html>
  <head>
    <title>A ring shaped loader with only CSS | one-html-page-challenge</title>
    <style>
    *, *:before, *:after {
    box-sizing: border-box;
    }
    @keyframes loader {
    from {transform: scale(1) rotateY(0deg) rotateX(0deg) rotateZ(0deg)}
    to {transform: scale(2) rotateY(180deg) rotateX(180deg) rotateZ(180deg)}
    }
    html, body {
    width: 100%;
    height: 100%;
    }
    body {
    background:
    radial-gradient(#101010, black);
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: white;
    }
    .ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3.5rem;
    height: 3.5rem;
    border: 5px solid white;
    border-radius: 50%;
    animation: loader 1.5s infinite;
    animation-timing-function: cubic-bezier(1,0,0,1);
    animation-direction: alternate;
    box-shadow:
    0 0 3px grey inset,
    0 0 5px white,
    0 0 3px grey;
    }
    .ring:nth-child(2) {
    animation-delay: 250ms;
    }
    .ring:nth-child(3) {
    animation-delay: 500ms;
    }
    </style>
  </head>
  <body>
    <div class="ring"></div>
    <div class="ring"></div>
    <div class="ring"></div>
  </body>
</html>
